<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Replay mode options')"
    width="400px"
    @close="store.hide()"
    @opened="handleDialogOpened"
  >
    <el-card>
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="8">
          <label>{{ t('Elapsed time') }}:</label>
        </el-col>
        <el-col :span="10">
          <el-input
            ref="timeInputRef"
            v-model="store.elapsedTime"
            type="number"
            :min="0"
            :max="store.maxValue"
          />
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            @click="store.setMaxValue()"
            style="width: 100%"
          >
            {{ t('Max') }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <template #footer>
      <el-button 
        type="primary" 
        :disabled="!store.isValid"
        @click="store.confirm()"
      >
        {{ t('OK') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useReplayModeOptionsStore } from '@/stores/replayModeOptions'
import { useLanguageStore } from '@/stores/language'
import { ref, nextTick } from 'vue'

const store = useReplayModeOptionsStore()
const languageStore = useLanguageStore()
const timeInputRef = ref(null)

// 处理对话框打开后的自动聚焦
const handleDialogOpened = async () => {
  await nextTick()
  if (timeInputRef.value) {
    timeInputRef.value.focus()
  }
}

// 翻译函数
const t = (key) => {
  const translations = {
    'Replay mode options': {
      'en': 'Replay mode options',
      'zh': '回放模式选项'
    },
    'Elapsed time': {
      'en': 'Elapsed time',
      'zh': '跳转时间'
    },
    'Max': {
      'en': 'Max',
      'zh': '最大'
    },
    'OK': {
      'en': 'OK',
      'zh': '确认'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>